<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analog Clock</title>
    <style>
        #clock {
            width: 200px;
            height: 200px;
            border: 10px solid #aa568f;
            border-radius: 50%;
            position: relative;
            margin: 100px auto;
            background-color: #f0f0f0;
            transform: rotate(90deg);
        }

        .hour,
        .minute,
        .second {
            position: absolute;
            width: 50%;
            height: 2px;
            background-color: #333;
            top: 50%;
            transform-origin: 100%;
            transition: transform 0.5s ease-in-out;
        }

        .hour {
            background-color: hsl(0, 0%, 20%);
            transform: rotate(90deg);
        }

        .minute {
            background-color: #22ff67;
            transform: rotate(180deg);
        }

        .second {
            background-color: #ff0000;
            transform: rotate(270deg);
        }

        .center-dot {
            width: 10px;
            height: 10px;
            background-color: #333;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div id="clock">
        <div class="hour" id="hour"></div>
        <div class="minute" id="minute"></div>
        <div class="second" id="second"></div>
        <div class="center-dot"></div>
    </div>

    <script>
        function updateClock() {
            const now = new Date();
            const hours = now.getHours();
            // console.log(hours);
            const minutes = now.getMinutes();
            // console.log(minutes);
            const seconds = now.getSeconds();
            // console.log(seconds);
            console.log(hours, minutes, seconds);

            const hourHand = document.getElementById('hour');
            const minuteHand = document.getElementById('minute');
            const secondHand = document.getElementById('second');

            const hourDegrees = (hours % 12) * 30 + (minutes / 60) * 30;
            const minuteDegrees = (minutes / 60) * 360;
            const secondDegrees = (seconds / 60) * 360;
            console.log(hourDegrees, minuteDegrees, secondDegrees);

            hourHand.style.transform = `rotate(${hourDegrees}deg)`;
            minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
            secondHand.style.transform = `rotate(${secondDegrees}deg)`;
        }

        setInterval(updateClock, 1000); // Update every second
    </script>
</body>

</html>